<!--
* @author wn
* @date 2023/08/02 10:05:26
* @description: 热门推荐
!-->
<template>
	<!-- 推荐专区 -->
	<view class="hot-panel">
		<view class="item" v-for="item in list" :key="item.id">
			<view class="title">
				<text class="title-text">{{ item.title }}</text>
				<text class="title-alt">{{ item.alt }}</text>
			</view>
			<navigator
				hover-class="none"
				:url="`/pages/hot/hot?type=${item.type}`"
				class="cards"
			>
				<image
					v-for="src in item.pictures"
					:key="src"
					:src="src"
					mode="aspectFit"
					class="hot-img"
				></image>
			</navigator>
		</view>
	</view>
</template>
<script lang="ts" setup>
defineProps<{ list: HotItem[] }>()
</script>
<style lang="scss">
.hot-panel {
	display: flex;
	flex-wrap: wrap;
	background-color: #fff;
	border-radius: 10rpx;
	margin: 20rpx 20rpx 0;
	.item {
		flex: 50%;
		&:nth-child(odd) {
			border-right: 2rpx solid #eee;
		}
		&:nth-child(-n + 2) {
			border-bottom: 2rpx solid #eee;
		}
		.title {
			padding: 24rpx 20rpx 6rpx;
			.title-text {
				font-size: 32rpx;
				color: #262626;
			}
			.title-alt {
				font-size: 28rpx;
				color: #7f7f7f;
				margin-left: 16rpx;
			}
		}
		.cards {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 180rpx;
			padding: 15rpx 20rpx;
			.hot-img {
				width: 150rpx;
				height: 15r0px;
			}
		}
	}
}
</style>
